<template>
  <Table style="padding-bottom: 10px" :table-data="tableData" border
         max-height="500px"
         ref="table"
         :headerStyle="{backgroundColor:'#fffbed'}"
         :page="page"
         row-key="id"
         @handleSizeChange="handleSizeChange"
         @handleCurrentChange="handleCurrentChange"
         :tableColumn="tableColumn"
  >
    <template slot="remission" slot-scope="{row}">
      {{ row.isApproval === 1 ? $t('是') : $t('否') }}
      <span v-show="row.isApproval === 1">
      <i class="cursor_pointer" style="font-size: 16px"
         :class="{'el-icon-arrow-down':!rowExpand[row.remissionId],'el-icon-arrow-up':rowExpand[row.remissionId]}"
         @click="toggleRowsExpand(row,row.remissionId)"></i>
    </span>
    </template>
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
        <Table :table-column="extendTableColumn" :table-data="extendTableData" :page="false">
          <template slot="remissionResult" slot-scope="{row}">
            {{ row.remissionResult === 1 ? $t('通过') : row.remissionResult === 2 ? $t('拒绝') : '' }}
          </template>
          <template slot="certificate" slot-scope="{row}">
            <el-image v-if="row.certificate" style=" width: 100%; height: 100px" :src="row.certificate"
                      :preview-src-list="[row.certificate]"></el-image>
          </template>
        </Table>
      </template>
    </el-table-column>
  </Table>
</template>

<script>
import eventBus from "@/utils/eventBus";
import {reasonTagsList} from "@/utils/tools";
import {resultList, recordDetail} from '@/api/postLoan'

export default {
  props:['routesQuery'],
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      relationList: [
        {label: this.$t('本人'), value: 1},
        {label: this.$t('配偶'), value: 8},
        {label: this.$t('父亲'), value: 2},
        {label: this.$t('母亲'), value: 3},
        {label: this.$t('兄弟'), value: 4},
        {label: this.$t('姐妹'), value: 5},
        {label: this.$t('同事'), value: 6},
        {label: this.$t('朋友'), value: 7},
      ],
      tableData: [],
      tableColumn: [
        {label: this.$t('操作时间'), prop: 'createTime', align: 'center', minWidth: 150},
        {label: this.$t('操作人'), prop: 'adminUserName', align: 'center', minWidth: 100},
        {label: this.$t('手机号'), prop: 'phones', align: 'center', minWidth: 100},
        {label: 'zalo', prop: 'zalo', align: 'center', minWidth: 100},
        {label: 'whatsApp', prop: 'whatsApp', align: 'center', minWidth: 100},
        {label: this.$t('与借款人关系'), prop: 'contactObject', align: 'center', minWidth: 150},
        {label: this.$t('结果'), prop: 'contactResult', align: 'center', minWidth: 200},
        {label: this.$t('承诺还款时间'), prop: 'admitTime', align: 'center', minWidth: 150},
        {label: this.$t('备注'), prop: 'remarks', align: 'center', minWidth: 200},
        {label: this.$t('是否申请减免'), prop: 'remission', slot: 'remission', align: 'center', minWidth: 200},
      ],
      extendTableColumn: [
        {label: this.$t('减免金额'), prop: 'remissionAmount', align: 'center'},
        {label: this.$t('减免类型'), prop: 'cause1', align: 'center'},
        {label: this.$t('减免原因'), prop: 'cause2', align: 'center'},
        {label: this.$t('凭证'), prop: 'certificate', slot: 'certificate', align: 'center', minWidth: 150},
        {label: this.$t('减免结果'), prop: 'remissionResult', slot: 'remissionResult', align: 'center'},
        {label: this.$t('审批原因'), prop: 'approvalReason', align: 'center'},
        {label: this.$t('备注'), prop: 'remark', align: 'center'},
        {label: this.$t('审批时间'), prop: 'inputTimestamp', align: 'center'},
        {label: this.$t('审批人'), prop: 'inputUserId', align: 'center'},
      ],
      extendTableData: [],
      rowExpand: {}
    }
  },

  mounted() {
    this.getList()
    eventBus.$on('addCollectionResultRecord', () => {
      this.getList()
    })
  },
  methods: {
    async getList() {
      const {orderId} = this.routesQuery
      const res = await resultList({
        loanRecordId: orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {list,total, } = res.data
        this.tableData = list.map(item => {
          item.phones =  item.contactMode === 0 ? item.phone : ''
          item.zalo = item.contactMode === 1 ? item.phone : ''
          item.whatsApp = item.contactMode === 2 ? item.phone : ''
          const {collectionList, collectionTagsList} = reasonTagsList()
          const contactResult = collectionList.filter(v => item.contactResult === v.key)
          const tagsValue = collectionTagsList.filter(v => item.labelList === v.key)
          item.contactResult = contactResult.length && tagsValue.length ? contactResult[0].value + ' - ' + tagsValue[0].value : contactResult.length && tagsValue.length === 0 ? contactResult[0].value : ""
          item.contactObject = this.relationList.filter(i => i.value === item.contactObject)[0].label
          return item
        })
        this.page = Object.assign({}, this.page, {
          total: total
        })
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    async toggleRowsExpand(row, value) {
      const table = this.$refs.table.$children[0]
      this.tableData.forEach(item => {
        table.toggleRowExpansion(item, false)
        if (item.remissionId !== row.remissionId) {
          this.rowExpand[item.remissionId] = false
        }
      })
      this.rowExpand[value] = !this.rowExpand[value]
      if (this.rowExpand[value]) {
        const formData = new FormData()
        formData.append('remissionId', row.remissionId)
        const res = await recordDetail(formData)
        if (res.code === 1 && res.data) {
          this.extendTableData = [res.data]
          table.toggleRowExpansion(row)
        }
      }
    }
  },
  beforeDestroy() {
    eventBus.$off('addCollectionResultRecord')
  }
}
</script>

<style scoped>
::v-deep .el-table__expand-column {
  display: none;
}
</style>
